$(function () {
  var InitChart = echarts.init

  var employmentChart = InitChart(document.getElementById('employmentChart'))
  var incomeChart = InitChart(document.getElementById('incomeChart'))
  var gdpChart = InitChart(document.getElementById('gdpChart'))
  var financeChart = InitChart(document.getElementById('financeChart'))
  var povertyChart = InitChart(document.getElementById('povertyChart'))

  var employmentData = [{
      name: '乐山市',
      value: '30000'
    },
    {
      name: '广元青川县',
      value: '21000'
    },
    {
      name: '阿坝藏族羌族自治州',
      value: '34000'
    },
    {
      name: '北川羌族自治县',
      value: '31000'
    },
    {
      name: '成都市都江堰',
      value: '19000'
    },
    {
      name: '成都市温江区',
      value: '19900'
    },
    {
      name: '成都市邛崃',
      value: '26900'
    },
    {
      name: '广元市剑阁县',
      value: '16700'
    },
  ]
  drawBar(employmentChart, employmentData, 15000, {
    color: 'rgba(248,231,28,0.64)',
    borderColor: '#F8E71C',
  })
  drawBar(incomeChart, [{
      name: '乐山市',
      value: '27.3'
    },
    {
      name: '广元青川县',
      value: '26.3'
    },
    {
      name: '阿坝藏族羌族自治州',
      value: '32.2'
    },
    {
      name: '北川羌族自治县',
      value: '24.4'
    },
    {
      name: '成都市都江堰',
      value: '21.5'
    },
    {
      name: '成都市温江区',
      value: '31.8'
    },
    {
      name: '成都市邛崃',
      value: '24.3'
    },
    {
      name: '广元市剑阁县',
      value: '29.6'
    },
  ], '20', {
    color: 'rgba(0,255,255,0.58)',
    borderColor: '#00FFFF',
    axisLabel: {
      formatter: '{value}%'
    }
  })
  drawBar(gdpChart, _.map(employmentData, function(item) { return { name: item.name, value: item.value / 1000 }; }), 15, {
    color: '#1085C0',
    borderColor: '#03CEF9',
    axisLabel: {
      formatter: '{value}%'
    }
  })
  drawBar(financeChart,  _.map(employmentData, function(item) { return { name: item.name, value: item.value / 1000 }; }), 15, {
    color: 'rgba(55,201,54,0.60)',
    borderColor: '#37C936',
    axisLabel: {
      formatter: '{value}%'
    }
  })

  drawBar(povertyChart, employmentData, 15000, {
    color: 'rgba(74,114,255,0.58)',
    borderColor: '#4A72FF'
  })
})

function drawBar(chart, data, benchmark, option) {
  var lineStyle = {
    color: '#38394D'
  }
  var formatter = option.axisLabel ? option.axisLabel.formatter : '{value}'

  var yAxis = [{
    type: 'value',
    splitNumber: 4,
    min: 0,
    nameRotate: 90,
    axisLine: {
      lineStyle: lineStyle
    },
    axisLabel: {
      formatter: formatter
    },
    splitLine: {
      lineStyle: lineStyle
    },
    axisTick: {
      show: false
    }
  }]
  var options = {
    textStyle: {
      fontSize: '12px',
      color: '#A0A1B4'
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      left: '1%',
      right: '10%',
      top: '6%',
      bottom: '20%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: _.map(data, function (item, i) {
        return item.name
      }),
      axisLine: {
        lineStyle: lineStyle
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        rotate: 45,
        interval: 0,
      }
    }],
    yAxis: yAxis,
    series: [{
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        normal: {
          color: option.color,
          borderColor: option.borderColor
        }
      },
      markLine: {
        label: {
          normal: {
            show: false,
          }
        },
        lineStyle: {
          normal: {
            width: 2,
            color: '#F95FB6',
            type: 'solid',
          }
        },
        symbol: 'none',
        data: [{
          name: '评审标准线',
          yAxis: benchmark
        }]
      },
      data: data
    }]
  }
  chart.setOption(options, false)
}
